<!--
 * @Author: your name
 * @Date: 2021-07-13 22:39:34
 * @LastEditTime: 2021-07-16 16:14:10
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \练习库e:\72-briup\briupteamproj\src\views\components\Links\Link.vue
-->
<template>
    <!-- 链接 -->
      <div class="content">
        <!-- 上框 -->
          <div class="content-1">
              <div class="content_title">
                {{name}} 
                <div class="more">{{title}}</div>
              </div>
              <div class="articles" v-for="(item) in link" :key="item.id">
                <!-- <img :src="right" alt=""> -->
                <div class="title" >
                  <img :src="right" alt="">
                  {{item.title}}
                </div>
              </div>
          </div>
      </div>
        <!-- /上框 -->
        <!-- 下框 -->
        <!-- <div class="content-2">
          <div class="content_title">友情链接</div>
          <div class="articles">
            <ul>
              <li>
                <img :src="right" alt="">
                <a href="">教育部</a>
              </li>
              <li>
                <img :src="right" alt="">
                <a href="">国务院学位委员会办公室</a>
              </li>
            </ul>
          </div>
        </div> -->
    <!-- </div> -->

        <!-- /下框 -->
      <!-- </div> -->
    <!-- /链接 -->
</template>
<script>
import {get} from "../../../utils/request";
export default {
  data() {
    return {
      right: '',

    }
  },
  created(){
    this.loadright();
  },
  methods:{
    loadright(){
      let url = "/index/findByKey";
      get(url,{name:"right"}).then(resp =>{
        if(resp.data) {
          this.right = resp.data.val;
          // console.log(this.right)
        }
      })
    }
  },
 
  props: {
    link: {
      type: Array,
      default() {
        return []
      }
    },
    name: {
      type: String,
      default:''
    },
    title: {
      type: String,
      default:''
    }
    // right: {
    //   default:''
    // },
 

  }
}
</script>
<style scoped>
.content{
  width: 100%;
  margin-bottom: 10px;
  
  /* height: 800px; */
  /* background-color: black; */
  /* margin-top: 10px; */
  /* margin-right: 5px; */
}
.content .content_title{
  width: 100%;
  height: 24px;
  border-radius: 2px;
  margin: 1px;
  background-color: rgb(122,182,234);
  color: white;
  font-weight: bold;
  font-size: 14px;
  padding-left: 10px;
  padding-top: 5px;
}
.content .content_title .more{
  display: inline-block;
  font-size: 12px;
  font-weight: normal;
  margin-left: 65px;
  cursor: pointer;
}
.content .content_title .more:hover{
  text-decoration: underline;
}
.content .content-1{
  width: 100%;
  height: 320px;
  background-color: rgb(241,249,254);
  border: 1px solid rgb(169, 192, 236);
  overflow: hidden;
  /* text-overflow: ellipsis; */
  /* white-space: nowrap; */
  /* padding: 5px; */

}
/* .content .content-1 .articles{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
} */
.content .content-1 .articles .title{
  width: 95%;
  height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  margin-top: 10px;
  margin-left: 10px;
  color: black;
}
.content .content-1 .articles .title:hover{
  text-decoration: underline;
  color: red;
  cursor: pointer;
}
/* .content .content-2{
  width: 200px;
  height: 620px;
  margin-top: 20px;
  background-color: teal;
} */

</style>